<!-- 蓝色简洁登录页面 -->
<template>
  <view class="t-login" >
    <!-- 页面装饰图片 -->
    <image class="img-a" src="@/static/2.png"></image>
    <image class="img-b" src="@/static/3.png"></image>
    <!-- 标题 -->
    <view class="t-b">{{ title }}</view>
    <form class="cl">
      <view class="t-a">
        <image src="@/static/sj.png"></image>
        <input placeholder="请输入账号" value="yewu00" v-model="userName" />
      </view>
      <view class="t-a">
        <image src="@/static/mima.png"></image>
        <input
          password
          type="text"
          name="password"
          placeholder="请输入您的密码"
          v-model="password" />
      </view>
      <button @click="login()">登 录</button>
    </form>
    <div class="createAccountBox">
      <div class="left" @click="createAccountFn">注册</div>
      <div class="rightBox" @click="resetPassword">找回密码</div>
    </div>
    <div class="button_describe">
      <u-checkbox-group v-model="checked">
        <u-checkbox name="协议"></u-checkbox>
      </u-checkbox-group>
      已阅读并同意<span @click="toUserAgreement">《用户协议和隐私政策》</span>
    </div>
    <view class="t-f"><text>————— 微信快速登录 —————</text></view>
    <view class="t-e cl">
      <view class="t-g" @tap="wxLogin()">
        <image src="@/static/wx.png"></image>
      </view>
    </view>
  </view>
</template>
<script>
import { login, getOpenId } from "@/api/home.js";
import md5 from "../../../common/md5/md5.min.js";

import { mapState, mapMutations } from "vuex";
export default {
  data() {
    return {
      title: "欢迎使用KT智联小程序！",
      second: 60, //默认60秒
      showText: true, //判断短信是否发送
      userName: "test", //账号
      password: "test", //密码
      checked: ["协议"],
    };
  },
  computed: {
    ...mapState(["$token"]),
  },
  methods: {
    ...mapMutations(["setUserInfo", "setToken"]),
    toUserAgreement() {
      uni.navigateTo({
        url: "/pages/modules/flow/userAgreement",
      });
    },
    resetPassword() {
      uni.showToast({
        title: "请联系厂商售后重置密码",
        icon: "none",
      });
    },
    //当前登录按钮操作
    async login() {
      if (!this.userName) {
        uni.showToast({
          title: "请输入账号",
          icon: "none",
        });
        return;
      }
      if (this.checked.length > 0) {
        try {
          uni.showLoading({
            title: "加载中",
          });
          let that = this;
          wx.login({
            async success(res) {
              let wxcode = res?.code;

              if (wxcode) {
                try {
                  let res = await login({
                    password: md5(that.password),
                    account: that.userName,
                  });
                  that.setUserInfo({
                    name: res?.name,
                    account: res?.account,
                    createType: res?.createType,
                    account: res?.account,
                  });
                  that.setToken(res?.token);
                  uni.showToast({
                    title: "登录成功！",
                    icon: "none",
                  });
                  uni.hideLoading();
                  uni.switchTab({
                    url: "/pages/modules/home/index",
                  });
                } catch (error) {
                  console.log(error, "error");
                  uni.hideLoading();
                }
              } else {
                console.log(error, "error");
                uni.hideLoading();
              }
            },
          });
        } catch (e) {
          uni.hideLoading();
        }
      } else {
        uni.showToast({
          title: "请先勾选《用户协议和隐私政策》",
          icon: "none",
        });
      }
    },
    //等三方微信登录
    wxLogin() {
      uni.reLaunch({
        url: "/pages/modules/home/index",
        success: () => {},
      });
    },
    // 注册
    createAccountFn() {
      uni.navigateTo({
        url: "/pages/modules/login/sign",
      });
    },
  },
};
</script>
<style lang="scss">
.img-a {
  position: absolute;
  width: 100%;
  top: -280rpx;
  right: -100rpx;
}

.img-b {
  position: absolute;
  height: 350rpx;
  width: 50%;
  bottom: 0;
  left: -50rpx;
  margin-bottom: 0rpx;
}

.t-login {
  width: 80%;
  padding: 10%;
  margin: 0 auto;
  font-size: 28rpx;
  color: #000;
  height: 100vh;
  background: white;
}

.t-login button {
  font-size: 28rpx;
  background: #5677fc;
  color: #fff;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 50rpx;
  box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
  padding: 0 20rpx 0 120rpx;
  height: 70rpx;
  line-height: 70rpx;
  margin-bottom: 50rpx;
  background: #f8f7fc;
  border: 1px solid #e9e9e9;
  font-size: 28rpx;
  border-radius: 50rpx;
}

.t-login .t-a {
  position: relative;
}

.t-login .t-a image {
  width: 45rpx;
  height: 40rpx;
  position: absolute;
  left: 32rpx;
  top: 18rpx;
  border-right: 2rpx solid #dedede;
  padding-right: 20rpx;
}

.t-login .t-b {
  text-align: left;
  font-size: 46rpx;
  color: #000;
  padding: 25% 0 10% 0;
  font-weight: bold;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 200rpx 0 0 0;
  color: #666;
  position: absolute;
  z-index: 3;
  left: 50%;
  width: 80%;
  transform: translateX(-50%);
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #000;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: "\20";
}

.button_describe {
  display: flex;
  justify-content: flex-start;
  font-size: 26rpx;
  font-weight: 400;
  color: #c3c3c3;
  margin-top: 40rpx;
  margin-bottom: 40rpx;
  z-index: 2;
}

.button_describe span {
  color: #00408e;
}

.createAccountBox {
  margin-top: 20rpx;
  display: flex;
  justify-content: space-between;

  > div {
    color: #5677fc;
    padding: 0 40rpx;
  }
}
</style>
